<template>
  <div class="user-edit-phone-page">
    <div class="user-edit-phone">
      <b class="title">手机号</b>
      <p class="phone-number van-hairline--bottom"> 
        <span class="phone_code" style="" @click="seclectCode">
          <strong>{{phoneCode}}</strong> 
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xialajiantou"></use>
          </svg>
        </span> 
        <input type="text" placeholder="请输入手机号码" maxlength="11" v-model="Cphone" />
      </p>
      <van-actionsheet v-model="show" :actions="actions" cancel-text="取消" @select="onSelect" @cancel="onCancel"/>
      <!-- <p class="tips">
        号码显示方式：{{phoneCode ==='+86' ? '前三后四显示' : '前二后二显示'}}
      </p> -->
      <!-- <p class="edit-phone-conter">
        <material-input placeholder="请输入手机号码" :type="'number'" :maxlength="11" v-model="Cphone"></material-input>
      </p>
      <div class="edit-phone-way">
        <p class="edit-phone-tip">号码显示方式</p>
        <div class="edit-phone-list">
          <div class="edit-phone-star" @click="selectHandler('star')">
            <div class="edit-phone-left" :style="{color:phoneType === 'star'?'#007AE6':'#333333'}">前三后四显示</div>
            <div
              class="bg_img edit-phone-right"
              :style="{backgroundImage:'url('+(phoneType === 'star'?checkSelImg:checkImg)+')'}"
            ></div>
          </div>
          <div class="edit-phone-all" @click="selectHandler('all')">
            <div class="edit-phone-left" :style="{color:phoneType === 'all'?'#007AE6':'#333333'}">全号码显示</div>
            <div
              class="bg_img edit-phone-right"
              :style="{backgroundImage:'url('+(phoneType === 'all'?checkSelImg:checkImg)+')'}"
            ></div>
          </div>
        </div>
      </div> -->
      <button class="edit-phone-query" @click="godSub" :disabled='disable'>确认</button>
    </div>
  </div>
</template>
<script>
import MaterialInput from 'COMP/MaterialInput'
import { mapGetters } from 'vuex'
import * as types from '@/store/mutation-types'
export default {
  components: {
    MaterialInput
  },
  data() {
    return {
      Cphone: '',
      phoneType: '',
      checkSelImg: require('IMG/user/check_sel.png'),
      checkImg: require('IMG/user/check_nor.png'),
      show: false,
      actions: [
        { name: '中国大陆 +86', phoneCode: '+86' },
        { name: '香港 +852', phoneCode: '+852' }, 
      ],
      phoneCode:"+86",
      disable:true,
    }
  },
  created() {
    this.phoneCode = this.reportAddInfo.areaCode || this.phoneCode
    this.Cphone = this.reportAddInfo.clientPhone
    this.phoneType = this.reportAddInfo.phoneDisplay || false
  },
  computed: {
    ...mapGetters(['reportAddInfo'])
  },
  watch:{
    Cphone (val) { 
      if (val == '' ) {
        this.disable = true;
      }else {
        this.disable = false;
      }
      if (val.replace(/[^0-9]/ig,"")) {   
        this.Cphone = val.replace(/[^0-9]/ig,"")
      }
    } 
  }, 
  methods: {
    // selectHandler(val){
    //   this.phoneType = val
    // },
    seclectCode () {
      this.show = true;
    },
    onSelect (item) {
      this.phoneCode = item.phoneCode;
      this.show = false;
    },
    onCancel () {
      this.show = false;
    },
     godSub() {
      let reg = /^1[3-9]\d{9}$/g
      if (this.phoneCode == '+86') {
        if (!reg.test(this.Cphone)) {
          return this.$toast('请输入正确的手机号')
        }
      }
      if (this.phoneCode == '+852') {
        if(this.Cphone.length !== 8) {
          return this.$toast('请输入正确的手机号')
        }
      }
      // if (Number(this.Cphone).length == 0) {
      //   this.$dialog
      //     .alert({
      //       message: '名片展示手机号不可为空'
      //     })
      //     .then(() => {
      //       // on close
      //     })
      //   return
      // }
      // if (this.Cphone.length != 11) {
      //   this.$dialog
      //     .alert({
      //       message: '请输入正确手机号'
      //     })
      //     .then(() => {
      //       // on close
      //     })
      //   return
      // }
      let _reportAddInfo = {
        clientPhone: this.Cphone,
        areaCode:this.phoneCode
        // clientPhoneType: this.phoneType
      }
      this.$store.commit(types.REPORT_INFO, _reportAddInfo)
      this.$router.go(-1)
      // this.$router.push(`/user/myReport/addReport`)
    }
  }
}
</script>
<style lang="less">
.van-dialog {
  border-radius: 12px;
  width: 72%;
  text-align: center;
}
.van-dialog__message {
  font-size: 15px;
  color: rgba(51, 51, 51, 1);
}
.van-button__text {
  font-size: 18px;
  color: rgba(0, 122, 230, 1);
}
.material-input__component .material-input {
  padding-left: 16px;
}
.user-edit-phone-page {
  .title{
    display: block;
    font-size: 24px;
    font-weight: 600;
    margin: 25px 0 0 16px;
    color: #13284D;
  }
  .phone-number{
    margin: 20px 16px;
    margin-bottom: 0;
    font-size: 16px;
    display: flex;
    input{
      width: 80%;
      line-height: 40px;
      border:none;
      &::placeholder{
        color: #bbb;
      }
    }
    .phone_code {
      // width:20%;
      display: flex;
      align-items: center;
      color:#405170;
      position: relative;
      margin-right: 24px;
      &:after{
        content: '';
        position: absolute;
        right: -12px;
        width: 1px;
        height:20px;
        background:rgba(155,164,180,1);
      }
      .icon {
        width:16px;
        height:16px;
        margin-left:5px;
      }
    }
  }
  .tips{
    font-size: 12px;
    color: #bbb;
    margin: 12px 16px;
  }
  // background: #f7f9fa;
  > .user-edit-phone {
    // margin: 27px 16px;
    > .edit-phone-title {
      font-size: 20px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      line-height: 28px;
      margin-bottom: 12px;
    }

    > .edit-phone-conter {
      margin-bottom: 30px;
      line-height: 30px;
      .material-input {
        color: #757575;
      }
      > .edit-phone-input {
        font-size: 16px;
        font-weight: 500;
        color: #333;
        line-height: 35px;
        width: 99%;
        border: 0;
        border-bottom: 1px solid #eeeeee;
        &::-webkit-input-placeholder {
          color: rgba(187, 187, 187, 1);
        }
      }
    }

    > .edit-phone-way {
      width: 100%;
      // margin: 16px;
      > .edit-phone-tip {
        color: #969ea8;
        font-size: 12px;
        height: 20px;
        padding-left: 16px;
      }
      > .edit-phone-list {
        background-color: white;
        border-top: 1px solid #e2e2e3;
        border-bottom: 1px solid #e2e2e3;
        > .edit-phone-all,
        .edit-phone-star {
          height: 50px;
          line-height: 50px;
          margin-left: 16px;
          position: relative;
          > .edit-phone-left {
            font-size: 16px;
          }
          > .edit-phone-right {
            width: 22px;
            height: 20px;
            position: absolute;
            right: 16px;
            top: 20px;
          }
        }
        > .edit-phone-star {
          border-bottom: 1px solid #e2e2e3;
        }
      }
    }

    > .edit-phone-query {
      font-size: 16px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 22px;
      height: 44px;
      background: rgba(0, 122, 230, 1);
      border-radius: 4px;
      width: 90%;
      border: 0;
      margin: 35px 16px;
    }
    .edit-phone-query[disabled] {
      background: #C9D5E0;
      color: #FFFFFF;
    }
  }
}
</style>
